<template>
	<view class="bi-order-remark" @click="handleClick">
		<view class="bi-order-remark__value" v-if="innerValue">
			{{ innerValue }}
		</view>
		<view v-else class="bi-order-remark__placeholder">请输入订单备注</view>
	</view>
</template>

<script>
	import { buildUrl } from '@/utils/url'
	import { unique } from '@/utils/string'
	import Event from '@/utils/event.js'
	import Cache from '@/utils/cache.js'
	
	export default {
		name: 'BiOrderRemark',
		props: {
			value: {
				type: String
			}
		},
		computed: {
			innerValue: {
				get () {
					return this.value
				},
				set (val) {
					this.$emit('input', val)
				}
			}
		},
		watch: {
			innerValue () {
				Cache.set(this.id, this.innerValue)
			}
		},
		created () {
			this.id = unique('order_remark_')
			Cache.set(this.id, this.innerValue)
			Event.on(this.id, ({ value }) => {
				this.innerValue = value || ''
			})
		},
		methods: {
			handleClick () {
				uni.navigateTo({
					url: buildUrl('/packages/order/order-remark/order-remark', {
						eventName: this.id
					})
				})
			}
		},
		beforeDestroy () {
			Cache.del(this.id)
		}
	}
</script>
<style>
	.bi-order-remark{
		text-align: right;
	}
	.bi-order-remark__value{
		line-height: 24px;
		padding: 8px 0;
	}
	.bi-order-remark__placeholder{
		line-height: 24px;
		padding: 8px 0;
		color: #808080;
	}
</style>